<template>
	<div class="game-container report-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-if="hasPermission('90750048')" :label="$t('common.member_number')" name="first">
				<main-content
					:tableHeight.sync="tableHeightFirst"
					:otherDependenComponents="otherDependenComponents"
				>
					<template slot="query">
						<el-form
							ref="formMember"
							:inline="true"
							:model="queryData"
							class="flex-warp-container"
						>
							<el-form-item
								:label="`${$t('common.belong_merchant')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<merchant-select
									v-model="queryData.merchantId"
								></merchant-select>
							</el-form-item>
							<el-form-item
								:label="`${$t('funds.user_name')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<el-input
									v-model="queryData.userName"
									clearable
									size="medium"
									:placeholder="$t('common.please_enter')"
									:disabled="loading"
									v-input="{ name: 'num_alp' }"
									maxlength="11"
								></el-input>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.business_model')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<el-select
									v-model="queryData.businessModel"
									size="medium"
									clearable
									:placeholder="$t('common.all')"
									style="width: 200px"
								>
									<el-option
										v-for="item in businessModelList"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.createBy')}:`"
								class="flex-row-container"
								label-width="61px"
							>
								<el-input
									v-model="queryData.createdBy"
									size="medium"
									:placeholder="
										$t('risk.please_enter_createdBy')
									"
									v-input="{ name: 'symbols' }"
									clearable
								></el-input>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.createAt')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<el-date-picker
									v-model="registerTime"
									size="medium"
									:picker-options="pickerShortcut2"
									format="yyyy-MM-dd HH:mm:ss"
									type="datetimerange"
									range-separator="-"
									:start-placeholder="$t('common.start_date')"
									:end-placeholder="$t('common.end_date')"
									align="right"
									:clearable="false"
									value-format="timestamp"
									:default-time="defaultTime"
								></el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button
									type="primary"
									icon="el-icon-search"
									:disabled="loading"
									size="medium"
									@click="search"
								>
									{{ $t('common.search') }}
								</el-button>
								<el-button
									icon="el-icon-refresh-left"
									:disabled="loading"
									size="medium"
									@click="reset"
								>
									{{ $t('common.reset') }}
								</el-button>
								<el-button
									v-if="hasPermission('90750050')"
									type="warning"
									icon="el-icon-folder"
									:disabled="loading"
									size="medium"
									@click="handleAdd()"
								>
									{{ $t('common.add') }}
								</el-button>
							</el-form-item>
						</el-form>
					</template>
					<template slot="content">
						<el-table
							v-loading="loading"
							element-loading-spinner="el-icon-loading"
							border
							class="small-size-table"
							:data="tableData"
							highlight-current-row
							:header-cell-style="getRowClass"
							:max-height="tableHeightFirst"
						>
							<el-table-column
								align="center"
								type="index"
								:label="`${$t('common.serial_number')}`"
								width="85"
							></el-table-column>
							<el-table-column
								prop="merchantId"
								align="center"
								:label="`${$t('common.belong_merchant')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ merchantFilter(scope.row.merchantId) }}
								</template>
							</el-table-column>
							<el-table-column
								prop="userName"
								align="center"
								:label="$t('funds.user_name')"
								min-width="150"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.userName || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="userName"
								align="center"
								:label="`${$t('common.business_model')}`"
							>
								<template slot-scope="scope">
									{{mappingBusinessModel(scope.row.businessModel) || '-'}}
								</template>
							</el-table-column>
							<el-table-column
								prop="createdBy"
								align="center"
								:label="`${$t('common.createBy')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.createdBy || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="createdAt"
								align="center"
								:label="`${$t('common.createAt')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.createdAt || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="remark"
								align="center"
								:label="`${$t('common.remark')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span>{{ scope.row.remark || '-' }}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="operating"
								align="center"
								:label="`${$t('common.actions')}`"
							>
								<template slot-scope="scope">
									<el-button
										v-if="hasPermission('90750051')"
										type="danger"
										icon="el-icon-delete"
										size="medium"
										@click="deleteAccount(scope.row)"
									>
										{{ $t('common.delete') }}
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<el-pagination
							:total="total"
							:current-page.sync="pageNum"
							class="pageValue"
							background
							layout="total, sizes,prev, pager, next, jumper"
							:page-size="pageSize"
							:page-sizes="pageSizes"
							:pager-count="9"
							@current-change="handleCurrentChange"
							@size-change="handleSizeChange"
						></el-pagination>
					</template>
				</main-content>
			</el-tab-pane>
			<el-tab-pane v-if="hasPermission('90750049')" :label="$t('routes.risk.proxy_line')" name="three">
				<main-content
					:tableHeight.sync="tableHeightThree"
					:otherDependenComponents="otherDependenComponents"
				>
					<template slot="query">
						<el-form
							ref="formProxyLine"
							:inline="true"
							:model="queryData"
							class="flex-warp-container"
						>
							<el-form-item
								:label="`${$t('common.belong_merchant')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<merchant-select
									v-model="queryData.merchantId"
								></merchant-select>
							</el-form-item>
							<el-form-item
								:label="`${$t('funds.proxy_name')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<el-input
									v-model="queryData.userName"
									clearable
									v-symbols
									oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
									:placeholder="$t('common.please_enter')"
									maxlength="11"
								></el-input>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.business_model')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<el-select
									v-model="queryData.businessModel"
									size="medium"
									clearable
									:placeholder="$t('common.all')"
									style="width: 200px"
								>
									<el-option
										v-for="item in businessModelList"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.createBy')}:`"
								class="flex-row-container"
								label-width="61px"
							>
								<el-input
									v-model="queryData.createdBy"
									size="medium"
									:placeholder="
										$t('risk.please_enter_createdBy')
									"
									v-input="{ name: 'symbols' }"
									clearable
								></el-input>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.createAt')}:`"
								class="flex-row-container"
								label-width="77px"
							>
								<el-date-picker
									v-model="registerTime"
									size="medium"
									:picker-options="pickerShortcut2"
									format="yyyy-MM-dd HH:mm:ss"
									type="datetimerange"
									range-separator="-"
									:start-placeholder="$t('common.start_date')"
									:end-placeholder="$t('common.end_date')"
									align="right"
									:clearable="false"
									value-format="timestamp"
									:default-time="defaultTime"
								></el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button
									type="primary"
									icon="el-icon-search"
									:disabled="loading"
									size="medium"
									@click="search"
								>
									{{ $t('common.search') }}
								</el-button>
								<el-button
									icon="el-icon-refresh-left"
									:disabled="loading"
									size="medium"
									@click="reset"
								>
									{{ $t('common.reset') }}
								</el-button>
								<el-button
									v-if="hasPermission('90750050')"
									type="warning"
									icon="el-icon-folder"
									:disabled="loading"
									size="medium"
									@click="handleAdd()"
								>
									{{ $t('common.add') }}
								</el-button>
							</el-form-item>
						</el-form>
					</template>
					<template slot="content">
						<el-table
							v-loading="loading"
							element-loading-spinner="el-icon-loading"
							border
							class="small-size-table"
							:data="tableData"
							highlight-current-row
							:header-cell-style="getRowClass"
							:max-height="tableHeightThree"
						>
							<el-table-column
								align="center"
								type="index"
								:label="`${$t('common.serial_number')}`"
								width="85"
							></el-table-column>
							<el-table-column
								prop="merchantId"
								align="center"
								:label="`${$t('common.belong_merchant')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ merchantFilter(scope.row.merchantId) }}
								</template>
							</el-table-column>
							<el-table-column
								prop="userName"
								align="center"
								min-width="180"
								:label="$t('funds.proxy_name')"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.userName || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="userName"
								align="center"
								:label="`${$t('common.business_model')}`"
							>
								<template slot-scope="scope">
									{{mappingBusinessModel(scope.row.businessModel) || '-'}}
								</template>
							</el-table-column>
							<el-table-column
								prop="createdBy"
								align="center"
								:label="`${$t('common.createBy')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.createdBy || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="createdAt"
								align="center"
								:label="`${$t('common.createAt')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.createdAt || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="remark"
								align="center"
								:label="`${$t('common.remark')}`"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span>{{ scope.row.remark || '-' }}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="operating"
								align="center"
								:label="`${$t('common.actions')}`"
							>
								<template slot-scope="scope">
									<el-button
										v-if="hasPermission('90750051')"
										type="danger"
										icon="el-icon-delete"
										size="medium"
										@click="deleteAccount(scope.row)"
									>
										{{ $t('common.delete') }}
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<el-pagination
							:total="total"
							:current-page.sync="pageNum"
							class="pageValue"
							background
							layout="total, sizes,prev, pager, next, jumper"
							:page-size="pageSize"
							:page-sizes="pageSizes"
							:pager-count="9"
							@current-change="handleCurrentChange"
							@size-change="handleSizeChange"
						></el-pagination>
					</template>
				</main-content>
			</el-tab-pane>
		</el-tabs>
		<el-dialog
			v-if="addVisible"
			:title="$t('common.add')"
			:visible.sync="addVisible"
			:destroy-on-close="true"
			width="30%"
			center
		>
			<el-form
				ref="formSub"
				:model="dialogData"
				:rules="rules"
				label-width="auto"
			>
				<el-form-item
					v-if="activeName === 'first'"
					:label="`${$t('common.member_number')}:`"
					prop="userName"
					:rules="[
						{
							required: true,
							validator: validateUser,
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model.trim="dialogData.userName"
						maxlength="1000"
						autocomplete="off"
						:placeholder="$t('member.username_placeholder')"
						clearable
						style="width:100%"
					></el-input>
				</el-form-item>
				<el-form-item
					v-if="activeName === 'three'"
					:label="`${$t('agent.agent_account')}:`"
					prop="userName"
					:rules="[
						{
							required: true,
							validator: validateProxyUser,
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model.trim="dialogData.userName"
						maxlength="1000"
						autocomplete="off"
						:placeholder="$t('agent.rule_input_tip_account')"
						clearable
						style="width:100%"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model="dialogData.merchantId"
						:placeholder="$t('common.components.select_merchant')"
						style="width:100%"
					></merchant-select>
				</el-form-item>
				<el-form-item :label="`${$t('common.components.remark')}:`">
					<el-input
						v-model="dialogData.remark"
						type="textarea"
						maxlength="50"
						style="width:100%"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
						show-word-limit
					></el-input>
				</el-form-item>
			</el-form>
			<p class="text-right"><span class="danger">*</span>为必填项</p>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="subAddOrEdit">
					{{ $t('common.confirm') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { notSpecial2, isHaveEmoji } from '@/utils/validate'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'
const setSearchTime = () => [
	dayjs()
		.subtract(0, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: routerNames.memberLoginWhitelist,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeightFirst: 480,
			tableHeightThree: 480,
			otherDependenComponents: ['wrap'],
			activeName: 'first',
			registerTime: setSearchTime(),
			queryData: { merchantId: '', businessModel: '' },
			tableData: [],
			addVisible: false,
			dialogData: { merchantId: '' },
			businessModelList: [
				{
					description: '现金业务',
					code: '1'
				},
				{
					description: '信用业务',
					code: '2'
				}
			]
		}
	},
	computed: {
		rules() {
			const merchantId = [
				{
					required: true,
					message: this.$t('member.please_select_a_merchant'),
					trigger: 'change'
				}
			]
			return {
				merchantId
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
		}
		if(!this.hasPermission('90750048') && this.hasPermission('90750049')){
			this.activeName = 'three'
		}
		this.initData()
	},
	methods: {
		// 切换导航
		handleClick(tab) {
			this.$nextTick(() => {
				if (this.$refs.formMember) {
					this.$refs.formMember.resetFields()
					if (!this.$store.getters.isZk) {
						this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
					}
					const name = tab.name
					if (name === 'first') {
						this.tableData = []
						this.$refs.formMember.resetFields()
						this.pageNum = 1
						this.queryData = {
							merchantId: this.$store.getters.isZk
								? ''
								: this.$store.getters.merchantInfo.id,
							businessModel: ''
						}
						this.registerTime = setSearchTime()
						this.initData()
					} else if (name === 'three') {
						this.$refs.formProxyLine.resetFields()
						this.pageNum = 1
						this.queryData = {
							merchantId: this.$store.getters.isZk
								? ''
								: this.$store.getters.merchantInfo.id,
							businessModel: ''
						}
						this.registerTime = setSearchTime()
						this.initData()
					}
				}
			})
		},
		initData() {
			this.loading = true
			const create = this.registerTime || []
			const [startTime, endTime] = create
			const params = {
				...this.queryData,
				type:this.activeName === 'first'? 1 : 2,
				createdAtBegin: dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'),
				createdAtEnd: dayjs(endTime).format('YYYY-MM-DD HH:mm:ss'),
				...this.getParams()
			}
			this.loading = false
			this.$api
				.userWhitelistPage(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.tableData = res.data.record || []
						this.total = res.data.totalRecord || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.initData()
		},
		reset() {
			if (this.activeName === 'first') {
				this.pageNum = 1
				this.queryData = {
					merchantId: this.$store.getters.isZk
						? ''
						: this.$store.getters.merchantInfo.id,
					businessModel: ''
				}
				this.registerTime = setSearchTime()
				this.initData()
			} else if (this.activeName === 'three') {
				this.pageNum = 1
				this.queryData = {
					merchantId: this.$store.getters.isZk
						? ''
						: this.$store.getters.merchantInfo.id,
					businessModel: ''
				}
				this.registerTime = setSearchTime()
				this.initData()
			}
		},
		// 新增
		handleAdd() {
			if (this.activeName === 'first') {
				this.dialogData = {
					merchantId: this.queryData.merchantId,
					userName: '',
					remark: ''
				}
			} else if (this.activeName === 'three') {
				this.dialogData = {
					merchantId: this.queryData.merchantId,
					userName: '',
					remark: ''
				}
			}
			this.addVisible = true
		},
		// 新增登录白名单会员账号输入校验
		validateUser(rule, value, callback) {
			const reg1 = /^[A-Za-z0-9]{4,11}$/
			const isSpecial = !notSpecial2(String(value))
			const isRmoji = isHaveEmoji(String(value))
			if (isSpecial) {
				callback(new Error(this.$t('common.validate.no_space')))
			} else if (isRmoji) {
				callback(
					new Error(this.$t('member.expression_is_not_supported'))
				)
			} else if (!value || !reg1.test(value)) {
				callback(new Error(this.$t('member.user_name_rules')))
			} else {
				callback()
			}
		},
		// 新增登录白名单会员账号输入校验
		validateProxyUser(rule, value, callback) {
			const reg1 = /^[A-Za-z0-9]{4,11}$/
			const isSpecial = !notSpecial2(String(value))
			const isRmoji = isHaveEmoji(String(value))
			if (isSpecial) {
				callback(new Error(this.$t('common.validate.no_space')))
			} else if (isRmoji) {
				callback(
					new Error(this.$t('member.expression_is_not_supported'))
				)
			} else if (!value || !reg1.test(value)) {
				callback(new Error(this.$t('member.user_name_rules')))
			} else {
				callback()
			}
		},
		deleteAccount(val) {
			const params = {
				id: val.id
			}
			const warningTitle = this.activeName === 'first' ? this.$t(
					'risk.risk_del_member_whiteList'
				) : this.$t(
					'risk.risk_del_proxy_whiteList'
				)
			this.$confirm(
				`<strong>${warningTitle}</strong><br/><strong style="color:#D9001B">${this.$t(
					'risk.del_risk_level_warning'
				)}</strong>`,
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					this.$api
						.userWhitelistDelete(params)
						.then((res) => {
							loading.close()
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.delete_success')
								)
							} else {
								this.$message({
									type: 'error',
									message: this.$t('common.delete_fail')
								})
							}
							setTimeout(() => {
								this.initData()
							}, 1000)
						})
						.catch(() => {
							loading.close()
						})
				})
				.catch(() => {})
		},
		subAddOrEdit() {
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					const merchantObj = this.$store.getters.merchantList.find(
						({ id }) => {
							return id === this.dialogData.merchantId
						}
					)

					const params = {
						userName: this.dialogData.userName,
						merchantId: this.dialogData.merchantId,
						remark: this.dialogData.remark,
						type:this.activeName === 'first'? 1 : 2,
						merchantName: merchantObj.merchantName
					}

					this.$api
						.userWhitelistSave(params)
						.then((res) => {
							loading.close()
							this.$message({
								message: `${this.$t('common.add_success')}`,
								type: 'success'
							})
							this.addVisible = false
							setTimeout(() => {
								this.initData()
							}, 1000)
						})
						.catch((err) => {
							loading.close()
							this.tipDialog(err.code)
						})
				}
			})
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.initData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.initData()
		}
	}
}
</script>

<style lang="scss" scoped>
.formTableBox {
	.borderBox {
		padding: 20px;
		border: 1px solid #dcdfe6;
		.el-input {
			width: 50%;
			margin-bottom: 15px;
		}
		.el-table {
			line-height: 32px;
		}
	}
}
</style>
